{% extends 'layout/basic.html' %}
{% load static %}
{% block title %}
    用户注册
{% endblock %}

{% block css %}
     <link rel="stylesheet" href="{% static 'css/account.css' %}">
     <style>
         /* 在注册页面隐藏导航栏右侧的用户菜单 */
         .navbar-nav.navbar-right {
             display: none;
         }
     </style>
{% endblock %}


{% block content %}
    <div class="account">
        <div class="title">用户注册</div>
        <form id="regForm" method="POST" novalidate>
            {% csrf_token %}
            {% for field in form %}
                {% if field.name == 'code' %}
                    <div class="form-group">
                        <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                        <div class="row">
                            <div class="col-xs-7">
                                {{ field }}
                                <span class="error-msg"></span>
                            </div>
                            <div class="col-xs-5">
                                <input id="btnSms" type="button" class="btn btn-default" value="点击获取验证码">
                            </div>
                        </div>
                    </div>
                {% else %}
                    <div class="form-group">
                        <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                        {{ field }}
                        <span class="error-msg"></span>
                    </div>
                {% endif %}
            {% endfor %}

            <div class="form-group">
                <input id="btnSubmit" type="button" value="注册"/>
            </div>
        </form>
    </div>
{% endblock %}

{% block js %}
   <script>
    //页面框架加载完成之后自动执行函数
    $(function() {
        console.log('页面加载完成，绑定按钮事件');
        bindClickBtnSms();
        bindClickBtnSubmit();
    });
    // 绑定验证码按钮点击事件
    function bindClickBtnSms() {
        console.log('绑定验证码按钮事件开始');
        var $btnSms = $('#btnSms');
        console.log('找到按钮元素:', $btnSms.length);
        $btnSms.click(function() {
            console.log('验证码按钮被点击');
            //获取用户输入的手机号
            var mobilephone = $('#id_phone').val();
            console.log('手机号输入值:', mobilephone);
            if (!mobilephone) {
                alert('请输入手机号');
                return;
            }
            // 简单的手机号格式验证
            if (!/^1[3-9]\d{9}$/.test(mobilephone)) {
                alert('请输入正确的手机号格式');
                return;
            }
            // 防止重复点击
            $btnSms.prop('disabled', true).val('发送中...');
            //发送ajax请求
            $.ajax({
                url: '/send/sms/',
                type: 'GET',
                data: {
                    mobilephone: mobilephone,
                    tpl: 'register'
                },
                success: function(res){
                    console.log('请求成功:', res);
                    if (res.status) {
                        alert('验证码发送成功');
                        // 添加倒计时功能
                        var countdown = 60;
                        var timer = setInterval(function() {
                            $btnSms.val('重新发送(' + countdown + ')');
                            countdown--;
                            if (countdown < 0) {
                                clearInterval(timer);
                                $btnSms.prop('disabled', false).val('点击获取验证码');
                            }
                        }, 1000);
                    } else {
                        alert('发送失败: ' + (res.error || '未知错误'));
                        $btnSms.prop('disabled', false).val('点击获取验证码');
                    }
                },
                error: function(xhr, status, error){
                    console.error('请求失败:', status, error);
                    alert('发送失败，请重试');
                    $btnSms.prop('disabled', false).val('点击获取验证码');
                }
            });
        });
        console.log('绑定验证码按钮事件完成');
    }
    // 绑定注册按钮点击事件
    function bindClickBtnSubmit() {
        console.log('绑定注册按钮事件开始');
        var $btnSubmit = $('#btnSubmit');
        console.log('找到按钮元素:', $btnSubmit.length);
        $btnSubmit.click(function() {
            console.log('注册按钮被点击');
            // 获取表单数据
            var formData = {
                username: $('#id_username').val(),
                email: $('#id_email').val(),
                password: $('#id_password').val(),
                re_password: $('#id_re_password').val(),
                phone: $('#id_phone').val(),
                code: $('#id_code').val(),
                csrfmiddlewaretoken: $('input[name="csrfmiddlewaretoken"]').val()
            };
            console.log('表单数据:', formData);
            // 简单验证
            if (!formData.username || !formData.email || !formData.password || !formData.re_password || !formData.phone || !formData.code) {
                alert('请填写所有必填字段');
                return;
            }
            if (formData.password !== formData.re_password) {
                alert('两次密码输入不一致');
                return;
            }
            // 防止重复点击
            $btnSubmit.prop('disabled', true).val('注册中...');
            // 发送ajax请求
            $.ajax({
                url: '/web/register/',
                type: 'POST',
                data: formData,
                success: function(res){
                    console.log('请求成功:', res);
                    if (res.status) {
                        alert('注册成功，请登录');
                        // 可以跳转到登录页面
                        // window.location.href = '/web/login/';
                    } else {
                        alert('注册失败: ' + (res.error || '未知错误'));
                    }
                },
                error: function(xhr, status, error){
                    console.error('请求失败:', status, error);
                    alert('注册失败，请重试');
                },
                complete: function(){
                    // 恢复按钮状态
                    $btnSubmit.prop('disabled', false).val('注册');
                }
            });
        });
        console.log('绑定注册按钮事件完成');
    }


   </script>
{% endblock %}



